/*
  学习目标：设置重定向路由

*/

import React, { Component } from 'react';
// 1. 导入重定向组件
import { Router, Route, Switch, Redirect } from 'react-router-dom';

import Login from './pages/Login';
import Layout from './pages/Layout';
import { getToken } from 'utils/storage';
import history from 'utils/history';

export default class App extends Component {
  render() {
    return (
      <Router history={history}>
        {/* Switch组件匹配到路由之后，不再向下匹配 */}
        {/* 第一次  path: / */}
        {/* 第二次  path: /layout */}
        <Switch>
          {/* 2. 设置重定向规则 */}
          {/* 🔔重定向的/ 一般要和exact配合使用 */}
          {/* <Redirect path="/" to="/Layout" exact></Redirect> */}
          <Route path="/login" component={Login}></Route>

          {/* 2有history */}
          {/* <Route path="/" component={Layout}></Route> */}
          {/* 3有history */}
          <AuthRoute path="/" component={Layout} aa="22" bb="33"></AuthRoute>
          {/* 4没有history */}
          {/* <Route path="/" render={() => <Layout></Layout>}></Route> */}
          {/* 5没有history */}
          {/* <Route path="/">
            <Layout></Layout>
          </Route> */}
        </Switch>
      </Router>
    );
  }
}
// 1. 新建组件AuthRoute组件
function AuthRoute(props) {
  // 1. 使用...结构剩余属性，类似函数的剩余参数
  const { path, component: Comp, ...restProps } = props;
  // console.log(props);
  return (
    <Route
      // 2. 将剩余属性，全部分配给Route组件即可
      {...restProps}
      path={path}
      render={(props) => {
        if (getToken()) {
          return <Comp {...props}></Comp>;
        } else {
          props.history.push('/login');
        }
      }}
    ></Route>
  );
}
